import {
  Input,
  Stack,
  Flex,
  Box,
  Text,
  InputGroup,
  InputLeftElement,
  Checkbox,
  FormControl,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverCloseButton,
  PopoverBody,
  PopoverArrow,
  useToast
} from "@chakra-ui/react"
import { Form, Field, Formik, ErrorMessage, useFormik } from 'formik'
import { FaUser, FaUnlockAlt, FaWeibo, FaWeixin, FaQq, FaMobileAlt } from "react-icons/fa";
import axios from 'axios'
export default function Register () {
  const toast = useToast()
  const formik = useFormik({
    initialValues: { username: "", email: "", password: '', },
    validate: values => {
      //表单验证
      const errors = {}
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!values.username) {
        errors.username = '请输入昵称'
      }
      if (!values.email) {
        errors.email = '请输入邮箱'
      } else if (!reg.test(values.email)) {
        errors.email = '请输入正确的邮箱'
      }
      if (values.password.length < 8) {
        errors.password = '密码长度不能小于8'
      }
      return errors
    },
    onSubmit: values => {
      const user = {
        ...values
      }
      axios.post('https://conduit.productionready.io/api/users', { user }).then(res => {
        toast({
          position: "top",
          status: 'success',
          title: '注册成功',
        })

      }).catch(e => {
        const errors = e.response.data.errors
        let msg = ''
        for (let key in errors) {
          msg = msg + (key + ':' + errors[key].join('')) + ' '
        }
        toast({
          position: "top",
          status: 'warning',
          title: msg,

        })
      })

    }
  })
  return <div>
    <Stack spacing={0}>
      <FormControl id="first-name" isRequired mb="20px">
        <Popover arrowShadowColor="#ff0000" closeOnBlur={false} autoFocus={false} placement="right" isOpen={formik.touched.username && formik.errors.username ? true : false}>
          <PopoverTrigger  >
            <InputGroup bgColor="rgba(247,247,247,1)">
              <InputLeftElement children={<FaUser color="#969696" />} h="50px" />
              <Input focusBorderColor="none" name="username" placeholder="你的昵称" borderRadius="none" h="50px" onBlur={formik.handleBlur} type="text" value={formik.values.eamil} onChange={formik.handleChange} />
            </InputGroup>
          </PopoverTrigger>
          <PopoverContent borderColor="#ff0000" borderWidth="2px" color="#ff0000">
            <PopoverArrow />
            <PopoverBody >
              {formik.touched.username && formik.errors.username ? formik.errors.username : null}
            </PopoverBody>
          </PopoverContent>
        </Popover>
        <Popover arrowShadowColor="#ff0000" closeOnBlur={false} autoFocus={false} placement="right" isOpen={formik.touched.email && formik.errors.email ? true : false}>
          <PopoverTrigger  >
            <InputGroup bgColor="rgba(247,247,247,1)">
              <InputLeftElement children={<FaMobileAlt color="#969696" />} h="50px" />
              <Input focusBorderColor="none" name="email" placeholder="邮箱" borderRadius="none" h="50px" onBlur={formik.handleBlur} type="text" value={formik.values.email} onChange={formik.handleChange} />
            </InputGroup>

          </PopoverTrigger>
          <PopoverContent borderColor="#ff0000" borderWidth="2px" color="#ff0000">
            <PopoverArrow />
            <PopoverBody >
              {formik.touched.email && formik.errors.email ? formik.errors.email : null}
            </PopoverBody>
          </PopoverContent>
        </Popover>
        <Popover arrowShadowColor="#ff0000" closeOnBlur={false} autoFocus={false} placement="right" isOpen={formik.touched.password && formik.errors.password ? true : false}>
          <PopoverTrigger  >
            <InputGroup bgColor="rgba(247,247,247,1)">
              <InputLeftElement children={<FaUnlockAlt color="#969696" />} h="50px" />
              <Input focusBorderColor="none" name="password" type="password" placeholder="设置密码" borderRadius="none" h="50px" onBlur={formik.handleBlur} type="text" value={formik.values.eamil} onChange={formik.handleChange} />
            </InputGroup>

          </PopoverTrigger>
          <PopoverContent borderColor="#ff0000" borderWidth="2px" color="#ff0000">
            <PopoverArrow />
            <PopoverBody >
              {formik.touched.password && formik.errors.password ? formik.errors.password : null}
            </PopoverBody>
          </PopoverContent>
        </Popover>


      </FormControl>


      <Box
        as="button"
        height="44px"
        width="100%"
        lineHeight="1.2"
        transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
        borderRadius="30px"
        fontSize="16px"
        fontWeight="semibold"
        bg="#f5f6f7"
        outline="none"
        color="#fff"
        bgColor="#42c02e"
        _hover={{ bg: "#3db922" }}
        marginBottom="60px"
        onClick={formik.handleSubmit}
      >
        设置密码
     </Box>
      <Flex justify="center" flexDir="column" alignItems="center" color="#b5b5b5" fontSize="12px" marginBlock="20px" >
        <Text>点击 “注册” 即表示您同意并愿意遵守简书</Text>
        <Text margin="0 20px">用户协议 和 隐私政策 。</Text>
      </Flex>
      <Flex justify="center" color="#b5b5b5" fontSize="12px" marginBlock="20px" >
        <Text>—————</Text>
        <Text margin="0 20px">社交帐号直接注册</Text>
        <Text>—————</Text>
      </Flex>
      <Flex justify="center" color="#b5b5b5" fontSize="26px" margin="20px">

        <Text mr="40px"><FaWeixin color="#00bb29" fontSize="28px" /></Text>
        <Text><FaQq color="#498ad5" /></Text>
      </Flex>

    </Stack>
  </div>
}